<script setup>
import { onBeforeMount,ref } from 'vue';
import MyFile from '@/components/MyFile.vue';
onBeforeMount(() => {
  if(!sessionStorage.getItem('user')) {
  window.location.href = '/login'
}
});
let user = ref(sessionStorage.getItem('user'));
let index=ref(1);
const handleClick = (node) => {
  console.log(node.index);
  switch (node.index) {
    case '1':
      index.value = 1;
      break;
    case '2':
      index.value = 2;
      break;
    case '3':
      index.value = 3;
      break;
    default:
      break;
  }
}
</script>

<template>
  <main>
    <div id="header">
      <div id="logo">快网盘-快即非凡</div>
      <div id="user">{{user}}</div>
      <div id="tip">当前用户：</div>
    </div>
    <div id="content">
      <div id="left">
        <el-menu default-active="1" class="el-menu-vertical-demo" style="height: 100%;">
          <el-menu-item @click="handleClick" index="1">我的文件</el-menu-item>
          <el-menu-item @click="handleClick" index="2">我的分享</el-menu-item>
          <el-menu-item @click="handleClick" index="3">账号设置</el-menu-item>
        </el-menu>
      </div>
      <div id="right">
        <MyFile v-if="index === 1" />
      </div>
    </div>
  </main>
</template>
<style scoped>
  #header {
    width: 100%;
    height: 40px;
    background-color: rgb(177.3, 179.4, 183.6);
  }
  #content {
    width: 100%;
    height: calc(100vh - 40px);
    background-color: rgb(245.9, 247.9, 250.9);
  }
  #logo {
    display: inline;
    font-size: 20px;
    font-weight: bold;
    color: white;
    line-height: 40px;
    margin-left: 20px;
  }
  #tip {
    display: inline;
    font-size: 20px;
    font-weight: bold;
    color: white;
    float:right;
    margin-right: 20px;
    line-height: 40px;
  }
  #user {
    display: inline;
    font-size: 20px;
    font-weight: bold;
    color: white;
    float:right;
    margin-right: 20px;
    line-height: 40px;
  }
  #left {
    width: 200px;
    height: 100%;
    background-color: white;
    float: left;
  }
  #right {
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    float: left;
    padding-left: 20px;
    padding-top: 20px;
  }
</style>
